<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      overflow: auto;
      width: 100%;
      height: 290px;
      /* 固定高度 */
      border: 1px solid gray;
      border-bottom: 0;
      border-right: 0;

    }

    td,
    th {
      border-right: 1px solid gray;
      border-bottom: 1px solid gray;
      /* width:100px; */
      height: 30px;
      box-sizing: border-box;
      /* overflow: hidden; */
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
     box-sizing: border-box;
    }

    th {
      background-color: lightblue;

    }
    table {
      border-collapse: separate;
      table-layout: fixed;
      width: 120%;
      /* 固定寬度 */
      text-align: center;
    }


  </style>
</head>

<body>
  <div>
    <table id="mytable" cellspacing="0" border="0" cellpadding="0">
      <thead>
        <tr>
          <th prop="id" fixed="left" width="50">序号</th>
          <th prop="reviewer" fixed="right">评论家</th>
          <th prop="timestamp"  >时间</th>
          <th prop="status" fixed="left">状态</th>
          <th prop="author" >作者</th>
          <th prop="importance" >重要性</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <div>
    <table id="mytable1" cellspacing="0" border="0" cellpadding="0">
      <thead>
        <tr>
          <th prop="id"  fixed="left" width="150">序号</th>
          <th prop="reviewer">评论家</th>
          <th prop="timestamp">时间</th>
          <th prop="status">状态</th>
          <th prop="author">作者</th>
          <th prop="importance">重要性</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script src="./table.js"></script>
  <script>
    new xygTable(
      {
        id: '#mytable',
        ajaxBack: function () {
          fetch('https://www.fastmock.site/mock/d762071b373168bf89e5214ca9db39f2/test/api/test_test').then((data) => {
            return data.json()
          }).then((json) => {
            this.renderTable(json.data.items)
          })
        }
      }
    )
    new xygTable(
      {
        id: '#mytable1',
        ajaxBack: function () {
          fetch('https://www.fastmock.site/mock/d762071b373168bf89e5214ca9db39f2/test/api/test_test').then((data) => {
            return data.json()
          }).then((json) => {
            this.renderTable(json.data.items)
          })
        }
      }
    )

  </script>
</body>

</html>